<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">
	
	img{
		width:100%;
		height: 400px;
	}
	
	*{
		margin:0;
		padding:0;
	}

	.main{
		width:100%;
		margin:0 auto;
	}


</style>
</head>
<body>
	
	<div class="top">
		<img src="3.jpg" alt="">
	</div>
	
	<div class="nav">
		<img src="4.jpg" alt="">
	</div>
	
	<div class="main">
		<img src="1.jpg" alt="">
		<img src="5.jpg" alt="">
	</div>

	<div style="width: 100%;height: 500px; background: pink;"></div>


<script type="text/javascript">

	var top = document.getElementsByClassName("top")
	var nav = document.getElementsByClassName("nav")
	var main = document.getElementsByClassName("main")

	window.onscroll = function(){
		if(document.documentElement.scrollTop >= top.offsetHeight ){
			nav.style.cssText = "position:fixed;top:0px"
		}else{
			nav.style.cssText = "position:static;"
		}
	}



</script>


</body>
</html>